import React, { Component } from 'react'
import '../assert/css/cate.css'
import { cateRequest, goodsRequest } from '../request/cate_request'
import Header from "../components/DefaultHeader"

export default class Cate extends Component {
    constructor() {
        super()
        this.state = {
            cate_list: [],
            active_id: 1,
            cate_name: "时令水果",
            goods_list: []
        }
    }
    change_goods(active_id, cate_name) {
        this.setState({ active_id, cate_name })
        goodsRequest(active_id).then(res => {
            this.setState({ goods_list: res.list })
        })
    }
    UNSAFE_componentWillMount() {
        cateRequest().then(res => {
            this.setState({ cate_list: res.list })
            var obj = res.list[0]
            this.change_goods(obj.id, obj.catename)
        })

    }
    render() {
        const { cate_list, active_id, cate_name, goods_list } = this.state
        const {history} = this.props
        return (
            <div>
                <div className="cate-container">
                <Header title='商品分类' right_text='登录' right_method={()=>{this.props.history.push('/login')}} />
                    <div className="content">
                        <ul className="left">
                            {
                                cate_list.map(item => (
                                    <li className={item.id === active_id ? "active" : ""} key={item.id} onClick={() => this.change_goods(item.id, item.catename)}>{item.catename}
                                    </li>
                                ))
                            }
                        </ul>
                        <ul className="right">
                            <li className="section">
                                <h3>{cate_name}<span onClick={()=>history.push("/goods_list/?type_id="+active_id+"&type_name="+cate_name)} style={{ float: 'right', fontSize: 14, fontWeight: 'normal' }}>查看更多&gt;&gt;</span></h3>
                                <ul>
                                    {
                                        goods_list.map(item => (
                                            <li key={item.id}>
                                                <img src={this.$static_host + item.img} alt="" />
                                                <p>{item.goodsname}</p>
                                            </li>
                                        ))
                                    }

                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}

